<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>div布局</title>
    <style type="text/css">
        body{
            margin:0;
            padding:0;
			background-color: #DCDCDC;
        }
        #heading{
			border:1px solid #f0f0f0;
            width:100%;
            background-color: White;
        }
		  #txt1{
            text-align:center;
		    margin-top:10px;
		    font-size:20px;
		    color:#00F;
        }
		  #txt2{
            text-align:center;
		    margin-top:2px;
		    font-size:15px;

        }
        #content-menu{
	         margin-top:15px;
            width:48%;
            height:120px;
            float:left;
		        background-color: White;
        }
  		.txt3{
  		    margin-top:30px;
  		    font-size:20px;
  		    color:#black;
          text-align:center;
  		}

		.txt4{
		   margin-top:5px;
		    font-size:12px;
            text-align:center;



		}
			.txt5{
			  margin-top:10px;
			margin-left:5px;
		    font-size:32px;

		}
			.txt6{
			color:#585858;
			 margin-top:10px;
		    font-size:28px;
		}
        #content-body{
		 margin-top:15px;
            width:49%;
             height:120px;
			margin-left:20px;
            background-color: White;
            float:left;
        }

	      #content-body1{
		    margin-top:15px;
            width:100%;
             height:170px;
            background-color: White;
            float:left;
        }

a{

text-decoration:none;

}


   li{ margin-top:7px;float:left;width:250px;font-size:40px;overflow:hidden  }
  .menu{width:100%;height:70px;border-right:#A8C29F solid 1px;border-bottom:#A8C29F solid 1px;}
  .menudiv{width:100%;height:999px;border-left:#A8C29F solid 1px;border-right:#A8C29F solid 1px;border-top:0;background:#fefefe}
    </style>
</head>
   <div>
        <div id="heading">
                <div id="txt1">健康小助手</div>
                <div  id="txt2">你身边的医生助手!</div>
        </div>
        <div id="content-menu"  onClick="jtys()">
            <div   style=" float:left; width:60%  ">
               <div  class="txt3"   >家庭医生 </div>
               <div  class="txt4"> 医生全称监护 </div>
          </div>
             <div  style=" float:left; width:40% ;margin-top:40px;   "><img    src="image/ren.png"></div>
        </div>
        <div id="content-body"  onClick="wxfw()">
		     <div   style=" float:left; width:70%  ">
                  <div class="txt3">问询服务 </div>
                  <div class="txt4">随时了解健康问题 </div>
             </div>
            <div  style=" float:left; width:30% ;margin-top:40px;   "><img    src="image/call.png"></div>
		</div>

		 <div id="content-menu">
            <div   style=" float:left; width:70%  ">
                <div class="txt3"   >预约服务 </div>
                 <div class="txt4">快速预约/复诊</div>
            </div>
             <div  style=" float:left; width:30% ;margin-top:40px;   "><img    src="image/yuyue.png"></div>
        </div>
        <div id="content-body">
		     <div   style=" float:left; width:70%  ">
                <div  class="txt3">温馨提示 </div>
                <div class="txt4" >实时掌控身体情况 </div>
             </div>
               <div  style=" float:left; width:30% ;margin-top:40px;   "><img    src="image/aixin.png"></div>
		</div>
    </div>


 <div  id="content-body1">
 <div class="menu">
 <ul>
 <li id="one1" style="color:#008040" onClick="setTab('one',1)">健康科普</li>
 <li id="one2"  style="color:#D5D5D5" onClick="setTab('one',2)">便民服务</li>
 </ul>
 </div>
   <div class="menudiv">
   <div id="kjbp">
   <table width="100%" border="0" >
  <tr>
    <td>
	<div style=" border:2px solid #f0f0f0;">
        <div style="width:22%;   float:left;  border:2px solid #f0f0f0; margin-left:4px; "><img     style="height:200px;"src="image/timg.jpg"></div>
          <div  style="width:74%;  float:left;">
	       <div   class="txt5" >喝太多牛奶容易导致骨质疏松 喝多少量才能补钙 </div>
	       <div class="txt6">  &nbsp;&nbsp; &nbsp; &nbsp;  美国卫生署及哈佛医学院曾发表一项报告：食用太多的奶制品与蛋白质是造成骨质疏松...... <div>
	       <div style="margin-top:10px;">
		        <div style="width:50%;  float:left; ">漫画科普</div>
		       <div  style="width:50%; text-align:right;  float:left;">2012-12-12 07:08:08</div>
         </div>
		 </div>
     </td>
  </tr>
  <tr>
    <td>

	<div style=" border:2px solid #f0f0f0;">
        <div style="width:22%;  float:left;  border:2px solid #f0f0f0; "><img     style="height:200px;"src="image/timg.jpg"></div>
          <div  style="width:74%;  float:left;">
	       <div   class="txt5" >喝太多牛奶容易导致骨质疏松 喝多少量才能补钙 </div>
	       <div class="txt6">  &nbsp;&nbsp; &nbsp; &nbsp;  美国卫生署及哈佛医学院曾发表一项报告：食用太多的奶制品与蛋白质是造成骨质疏松...... <div>
	       <div style="margin-top:10px;">
		        <div style="width:50%;  float:left; ">漫画科普</div>
		       <div  style="width:50%; text-align:right;  float:left;">2012-12-12 07:08:08</div>
         </div>
		 </div>
      </td>
  </tr>
   <tr>
    <td>
	<div style=" border:2px solid #f0f0f0;">
        <div style="width:22%;  float:left;  border:2px solid #f0f0f0; "><img     style="height:200px;"src="image/timg.jpg"></div>
          <div  style="width:74%;  float:left;">
	       <div   class="txt5" >喝太多牛奶容易导致骨质疏松 喝多少量才能补钙 </div>
	       <div class="txt6">  &nbsp;&nbsp; &nbsp; &nbsp;  美国卫生署及哈佛医学院曾发表一项报告：食用太多的奶制品与蛋白质是造成骨质疏松...... <div>
	       <div style="margin-top:10px;">
		        <div style="width:50%;  float:left; ">漫画科普</div>
		       <div  style="width:50%; text-align:right;  float:left;">2012-12-12 07:08:08</div>
         </div>
		 </div>
      </td>
  </tr>
   <tr>
    <td>
	 	<div style=" border:2px solid #f0f0f0;">
        <div style="width:22%;  float:left;  border:2px solid #f0f0f0; "><img     style="height:200px;"src="image/timg.jpg"></div>
          <div  style="width:74%;  float:left;">
	       <div   class="txt5" >喝太多牛奶容易导致骨质疏松 喝多少量才能补钙 </div>
	       <div class="txt6">  &nbsp;&nbsp; &nbsp; &nbsp;  美国卫生署及哈佛医学院曾发表一项报告：食用太多的奶制品与蛋白质是造成骨质疏松...... <div>
	       <div style="margin-top:10px;">
		        <div style="width:50%;  float:left; ">漫画科普</div>
		       <div  style="width:50%; text-align:right;  float:left;" > &nbsp;2012-12-12 07:08:08</div>
         </div>
		 </div>
      </td>
  </tr>
</table>

   </div>
    <div id="bmfw" style="display:none;">
   <table width="100%" border="0" >
  <tr>
    <td>
        <div style="width:22%;   float:left;  border:2px solid #f0f0f0; margin-left:4px; "><img     style="height:200px;"src="image/timg.jpg"></div>
          <div  style="width:74%;  float:left;">
	       <div   class="txt5" >喝2太多牛奶容易导致骨质疏松 喝多少量才能补钙 </div>
	       <div class="txt6">  &nbsp;&nbsp; &nbsp; &nbsp;  美国卫生署及哈佛医学院曾发表一项报告：食用太多的奶制品与蛋白质是造成骨质疏松...... <div>
	       <div style="margin-top:10px;">
		        <div style="width:50%;  float:left; ">漫画科普</div>
		       <div  style="width:50%; text-align:right;  float:left;">2012-12-12 07:08:08</div>
         </div>
     </td>
  </tr>
  <tr>
    <td>
        <div style="width:22%;  float:left;  border:2px solid #f0f0f0; "><img     style="height:200px;"src="image/timg.jpg"></div>
          <div  style="width:74%;  float:left;">
	       <div   class="txt5" >喝太多牛奶容易导致骨质疏松 喝多少量才能补钙 </div>
	       <div class="txt6">  &nbsp;&nbsp; &nbsp; &nbsp;  美国卫生署及哈佛医学院曾发表一项报告：食用太多的奶制品与蛋白质是造成骨质疏松...... <div>
	       <div style="margin-top:10px;">
		        <div style="width:50%;  float:left; ">漫画科普</div>
		       <div  style="width:50%; text-align:right;  float:left;">2012-12-12 07:08:08</div>
         </div>
      </td>
  </tr>
   <tr>
    <td>
        <div style="width:22%;  float:left;  border:2px solid #f0f0f0; "><img     style="height:200px;"src="image/timg.jpg"></div>
          <div  style="width:74%;  float:left;">
	       <div   class="txt5" >喝2太多牛奶容易导致骨质疏松 喝多少量才能补钙 </div>
	       <div class="txt6">  &nbsp;&nbsp; &nbsp; &nbsp;  美国卫生署及哈佛医学院曾发表一项报告：食用太多的奶制品与蛋白质是造成骨质疏松...... <div>
	       <div style="margin-top:10px;">
		        <div style="width:50%;  float:left; ">漫画科普</div>
		       <div  style="width:50%; text-align:right;  float:left;">2012-12-12 07:08:08</div>
         </div>
      </td>
  </tr>
   <tr>
    <td>
        <div style="width:22%;  float:left;  border:2px solid #f0f0f0; "><img     style="height:200px;"src="image/timg.jpg"></div>
          <div  style="width:74%;  float:left;">
	       <div   class="txt5" >喝2太多牛奶容易导致骨质疏松 喝多少量才能补钙 </div>
	       <div class="txt6">  &nbsp;&nbsp; &nbsp; &nbsp;  美国卫生署及哈佛医学院曾发表一项报告：食用太多的奶制品与蛋白质是造成骨质疏松...... <div>
	       <div style="margin-top:10px;">
		        <div style="width:50%;  float:left; ">漫画科普</div>
		       <div  style="width:50%; text-align:right;  float:left;">2012-12-12 07:08:08</div>
         </div>
      </td>
  </tr>
</table>

   </div>
    </div>
 </div>



</body>
</html>
<script>
function setTab(obj,obj1){
if(obj1=='1'){
  document.getElementById("kjbp").style.display="";
      document.getElementById("one1").style.color="#008040";
    document.getElementById("bmfw").style.display="none";
    document.getElementById("one2").style.color="#D5D5D5";

}
if(obj1=='2'){
         document.getElementById("one2").style.color="#008040";
	     document.getElementById("one1").style.color="#D5D5D5";
         document.getElementById("kjbp").style.display="none";
         document.getElementById("bmfw").style.display="";
  }
}
function jtys(){
location='community.jsp';
}
function wxfw(){
location='mysigndoctor.jsp';
}
</script>
